// tslint:disable: no-any
import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  ElementRef,
  Input,
  OnChanges,
  SimpleChanges,
  TemplateRef
} from '@angular/core';

import { ApesUpdateHostClassService } from '../core/services/update-host-class.service';
import { InputBoolean } from '../core/util/convert';
import { ListSize, ApesListGrid } from './interface';

@Component({
  selector           : 'apes-list',
  templateUrl        : './apes-list.component.html',
  providers          : [ ApesUpdateHostClassService ],
  preserveWhitespaces: false,
  changeDetection    : ChangeDetectionStrategy.OnPush,
  styles             : [ `
    :host {
      display: block;
    }

    apes-spin {
      display: block;
    }
  ` ]
})
export class ApesListComponent implements OnChanges {
  // region: fields
  @Input() apesDataSource: any[] = [];

  private _bordered = false;

  @Input() @InputBoolean() apesBordered = false;


  @Input() apesGrid: ApesListGrid;

  _isHeader = false;
  _header = '';
  _headerTpl: TemplateRef<void>;

  @Input()
  set apesHeader(value: string | TemplateRef<void>) {
    if (value instanceof TemplateRef) {
      this._header = null;
      this._headerTpl = value;
    } else {
      this._header = value;
    }

    this._isHeader = !!value;
  }

  _isFooter = false;
  _footer = '';
  _footerTpl: TemplateRef<void>;

  @Input()
  set apesFooter(value: string | TemplateRef<void>) {
    if (value instanceof TemplateRef) {
      this._footer = null;
      this._footerTpl = value;
    } else {
      this._footer = value;
    }

    this._isFooter = !!value;
  }

  @Input() apesItemLayout: 'vertical' | 'horizontal' = 'horizontal';

  @Input() apesRenderItem: TemplateRef<void>;

  private _loading = false;

  @Input() @InputBoolean() apesLoading = false;

  @Input() apesLoadMore: TemplateRef<void>;
  @Input() apesPagination: TemplateRef<void>;

  @Input() apesSize: ListSize = 'default';

  private _split = true;

  @Input() @InputBoolean() apesSplit = true;

  // endregion

  // region: styles

  prefixCls = 'apes-list';

  private _setClassMap(): void {
    const classMap = {
      [ this.prefixCls ]                               : true,
      [ `scroll-host` ]                                 : true,
      [ `${this.prefixCls}-vertical` ]                 : this.apesItemLayout === 'vertical',
      [ `${this.prefixCls}-lg` ]                       : this.apesSize === 'large',
      [ `${this.prefixCls}-sm` ]                       : this.apesSize === 'small',
      [ `${this.prefixCls}-split` ]                    : this.apesSplit,
      [ `${this.prefixCls}-bordered` ]                 : this.apesBordered,
      [ `${this.prefixCls}-loading` ]                  : this.apesLoading,
      [ `${this.prefixCls}-grid` ]                     : this.apesGrid,
      [ `${this.prefixCls}-something-after-last-item` ]: !!(this.apesLoadMore || this.apesPagination || this._isFooter)
    };
    this.updateHostClassService.updateHostClass(this.el.nativeElement, classMap);
  }

  // endregion

  constructor(private el: ElementRef, private cd: ChangeDetectorRef, private updateHostClassService: ApesUpdateHostClassService) {
  }

  ngOnChanges(changes: SimpleChanges): void {
    this._setClassMap();
    setTimeout(() => this.cd.detectChanges());
  }
}
